<template>
  <section class="container">
    <!-- 头部导航面包屑 -->
    <div class="mianbao">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>南京市酒店预订</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 搜索组件 -->
      <div class="zujian">
        <SouSuoZhujian />
      </div>

      <div>
        <!-- 地图左边 -->
        <div class="zuobian">
          <span class="zuobian_quyu">
            <div class="quyu">区域：</div>
            <div>
              <div :class="{dengyin:hidden}">
                <nuxt-link
                  to="#"
                  v-for="(item,index) in chengshi"
                  :key="index"
                  class="zuobian_luxian"
                >{{chengshi[index].name}}</nuxt-link>
              </div>
              <a href="#">
                <i class="el-icon-sort" @click="dianji">等</i>
              </a>
            </div>
          </span>

          <span class="gonglue">
            <div class="gonglue_header">攻略:</div>
            <div>北京，你想要的都能在这找到。博古通今，兼容并蓄，天下一城，如是帝都。 景点以故宫为中心向四处辐射；地铁便宜通畅，而且覆盖绝大多数景点。 由于早上有天安门升旗仪式，所以大多数人选择在天安门附近住宿。</div>
          </span>

          <span>
            <div>
              均价
              <el-tooltip class="item" effect="dark" content="等级均价由平日价格计算得出，节假日价格会有上浮。" placement="top-start">
                <sup>?</sup>
              </el-tooltip>：

              <el-tooltip class="item" effect="dark" content="等级评定是针对房价，设施和服务等各方面水平的综合评估。" placement="top-start">
              <span><i class="iconfont iconhuangguan"></i><i class="iconfont iconhuangguan"></i><i class="iconfont iconhuangguan"></i>￥999</span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="等级评定是针对房价，设施和服务等各方面水平的综合评估。" placement="top-start">
              <span><i class="iconfont iconhuangguan"></i><i class="iconfont iconhuangguan"></i><i class="iconfont iconhuangguan"></i><i class="iconfont iconhuangguan"></i>￥999</span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="等级评定是针对房价，设施和服务等各方面水平的综合评估。" placement="top-start">
              <span><i class="iconfont iconhuangguan"></i><i class="iconfont iconhuangguan"></i><i class="iconfont iconhuangguan"></i><i class="iconfont iconhuangguan"></i><i class="iconfont iconhuangguan"></i>￥999</span>
              </el-tooltip>
            </div>
           
          </span>
        </div>

        <!-- 地图 -->
        <div></div>
      </div>
    </div>
  </section>
</template>

<script>
import SouSuoZhujian from "@/components/hotel/SouSuoZhujian.vue";
export default {
  data() {
    return {
      chengshi: [],
      hidden: true
    };
  },
  components: {
    SouSuoZhujian
  },
  mounted() {
    this.$axios({
      url: "/cities",
      params: {
        name: "南京市"
      }
    }).then(res => {
      const { scenics } = res.data.data[0];
      this.chengshi = scenics;

      console.log(this.chengshi);
    });
  },
  methods: {
    dianji() {
      this.hidden = !this.hidden;
      console.log(123);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-bottom: 20px;
}

.mianbao {
  margin-top: 10px;
}

.zujian {
  margin-top: 20px;
}

.zuobian {
  width: 520px;
  .zuobian_quyu {
    display: flex;
    .quyu {
      width: 296px;
    }
  }
  .gonglue {
    margin-top: 20px;
    display: flex;
    .gonglue_header {
      width: 236px;
    }
  }
  .quyu {
    margin-right: 20px;
  }
  .zuobian_luxian {
    font-size: 12px;
    margin-right: 10px;
  }
}

//等 字隐藏区域的
.dengyin {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.junjia {
  background-color: #999;
  display: block;
  height: 15px;
  width: 15px;
  color: #000;
  border-radius: 50%;
  text-align: center;
}
</style>